<div id="clientGrid" tabindex="100">
  <a class="btn btn-small btn-primary pull-right" id="addClientButton" href="#">Add another client app</a>
  <h1>Client applications</h1>
  {{#if clients}}
  <table class="table table-bordered grid-overview">
    <thead>
    <tr>
      <th class="col-icon">Icon</th>
      <th class="col-about">Name</th>
      <th class="resource-id">Client ID</th>
      <th class="scopes">Scopes</th>
      <th class="col-meta">Credentials</th>
      <th class="actions">Actions</th>
    </tr>
    </thead>
    <tbody>
    {{#each clients}}
    <tr data-clientId="{{id}}" data-resourceServerId="{{resourceServer.id}}">
      <td><a href="#" class="editClient"><img src="{{thumbNailUrl}}"></a></td>
      <td><a class="editClient" href="#">{{name}}</a><br>
        {{description}}<br>
        <strong>Connected to</strong> <a href="#">{{resourceServer.name}}</a>
      </td>
      <td>{{clientId}}</td>
      <td>{{scopes}}</td>
      <td>
        <strong class="key-secret">Contact:</strong> <a href="mailto:{{contactEmail}}">{{contactName}}</a><br>
        <strong class="key-secret">Client ID <i rel="popover" class="icon-question-sign" name="client-key"></i>:</strong>
        <input class="copy-clipboard" readonly="readonly" value="{{clientId}}" /><br>
        <strong class="key-secret">Secret <i rel="popover" class="icon-question-sign" name="client-secret"></i>:</strong>
        <input class="copy-clipboard" readonly="readonly" value="{{secret}}" /><br>
      </td>
      <td><a class="deleteClientButton btn btn-small" href="#">Delete</a></td>
    </tr>
    {{/each}}
    </tbody>
  </table>
  {{else}}
  <p>No clients yet. <a id="noClientsAddOne" href="#">Add one</a>.</p>
  {{/if}}
</div>
